<template>
    <div class="app-container x-container" v-loading="loading">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="合集标题" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入合集标题" maxlength="50" clearable />
            </el-form-item>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="合集短标题" prop="short_title">
                        <el-input v-model="ruleForm.short_title" placeholder="请输入合集短标题" maxlength="50" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="短标题缩写" prop="short">
                        <el-input v-model="ruleForm.short" placeholder="请输入合集短标题" maxlength="50" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合集属性" prop="type">
                        <el-select v-model="ruleForm.type" placeholder="请选择合集属性" clearable>
                            <el-option :label="key" :value="value" v-for="(key, value) in publicParams.GAME_PROPERTY" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="SEO标题" prop="page_title">
                <el-input v-model="ruleForm.page_title" placeholder="请输入SEO标题" maxlength="500" clearable />
            </el-form-item>
            <el-form-item label="SEO关键词" prop="page_keywords">
                <el-input v-model="ruleForm.page_keywords" placeholder="请输入SEO关键词" maxlength="500" clearable />
            </el-form-item>
            <el-form-item label="SEO描述" prop="page_description">
                <el-input type="textarea" v-model="ruleForm.page_description" placeholder="请输入SEO描述" maxlength="500"
                    autosize clearable />
            </el-form-item>
            <el-form-item label="关联合集" prop="relate_ids">
                <association type="2" v-model="ruleForm.relate_ids"></association>
            </el-form-item>
            <el-form-item label="关联关键词" prop="keywords_ids">
                <!-- :gameType="ruleForm.type" -->
                <association ref="associationKRef" v-if="!loading" type="1" v-model="ruleForm.keywords_ids">
                </association>
            </el-form-item>
            <el-form-item label="文章首页图(380*214)" prop="cover">
                <FileUpload v-model="ruleForm.cover" :limit="1"></FileUpload>
            </el-form-item>
            <el-form-item label="下载详情页图(308*351)" prop="image">
                <FileUpload v-model="ruleForm.image" :limit="1"></FileUpload>
            </el-form-item>
            <el-form-item prop="is_recommend">
                <el-checkbox :true-value="1" :false-value="0" v-model="ruleForm.is_recommend"
                    name="type">首页推荐</el-checkbox>
            </el-form-item>
            <el-row>
                <el-col style="text-align: center;" :span="24">
                    <el-button @click="cancelForm(ruleFormRef)">取消</el-button>
                    <!-- <el-button @click="resetForm(ruleFormRef)">重置</el-button> -->
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef, 1)">提交并发布</el-button>

                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script setup>
import { addCollection, editCollection, getCollectionDetail } from '@/api/collection';
import { subSelect } from '@/api/tag'
import { reactive, ref, toRaw, inject, nextTick } from 'vue'
import association from '@/components/association/index.vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute();
const publicParams = inject('publicParams')
const used = inject('used');


const ruleFormRef = ref()
const ruleForm = reactive(
    {
        name: '',//合集标题
        type: '',//合集属性
        short_title: '',//合集短标题
        short: '',//短标题缩写
        page_keywords: '',//页面关键词
        page_title: '',//页面标题
        page_description: '',//页面描述
        keywords_ids: '',//关联关键词
        relate_ids: '',//关联合集
        cover: '',//缩略图
        image: '',//下载详情页图
        is_recommend: '0',//推荐:0=关,1=开
    }
)

const rules = reactive(
    {
        name: [
            { required: true, message: '请输入合集标题', trigger: 'blur' },
        ],
        type: [
            { required: true, message: '请选择合集属性', trigger: 'change' },
        ],
        short_title: [
            { required: true, message: '请输入合集短标题', trigger: 'blur' },
        ],
        short: [
            { required: true, message: '请输入短标题缩写', trigger: 'blur' },
        ],
        page_title: [
            { required: true, message: '请输入SEO标题', trigger: 'blur' },
        ],
        page_keywords: [
            { required: true, message: '请输入SEO关键字', trigger: 'blur' },
        ],
        page_description: [
            { required: true, message: '请输入SEO描述', trigger: 'blur' },
        ],
        cover: [
            { required: true, message: '请上传文章首页图', trigger: 'change' },
        ],
    }
)

/* 获取详情数据 */
let loading = ref(true);
const getDetail = async () => {
    const { data } = await getCollectionDetail({ id: route.query.id }, 'get')
    data.type += '';
    if (Array.isArray(data.keywords_ids)) {
        data.keywords_ids = data.keywords_ids.join(',')
    }
    if (Array.isArray(data.relate_ids)) {
        data.relate_ids = data.relate_ids.join(',')
    }
    Object.assign(ruleForm, data)
    loading.value = false;
}
let id = route.query.id;
if (id) {
    loading.value = true;
    getDetail()
} else {
    loading.value = false;
}
//提交
const submitForm = async (formEl, type) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let params = { ...ruleForm };
            type == 1 ? params.status = 1 : '';
            let res = id ? await editCollection(params, 'post') : await addCollection(params);
            if (res.code == 1) {
                used.msgSuccess(res.message)
                router.go(-1)
            } else {
                used.msgError(res.message)
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}
//取消
const cancelForm = (formEl) => {
    console.log('cancel!')
    router.go(-1)
}
//重置
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style scoped lang="scss">
.x-container {
    position: relative;
    padding: 20px;
    background-color: #fff;
}
</style>